<template>
	<view class="i-button-group" :style="[viewStyle]" :class="[viewClass]">
		<view class="e-flex e-flex-wrap" :style="[boxStyle]" >
			<view
				class="e-p-b-30 "
				:class="{ 'e-p-t-30': index < option.rowNumber }"
				:style="[itemStyle]"
				v-for="(item, index) in option.list"
				:key="item.url"
				@tap="jumpLink(item.link)"
			>
				<view class="e-flex-xy-center" v-if="option.buttonType < 2">
					<image  mode="aspectFill" class="img-92" :style="[imgStyle]" :src="$fullLink(item.url)" >
					</image>
				</view>
				<view class="text-center" :style="[{ color: option.textColor, paddingTop: option.buttonType < 2 ? '20rpx' : 0 }]" v-if="option.buttonType != 1">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type {pageLink} from './type'
	
	type ButtonItem = {
		url: string
		text:string
		link:pageLink
	}
	
	const props = withDefaults(defineProps<{
		option : {
			styleType: 0|1|2
			list:ButtonItem[]
			rowNumber: number
			buttonType: number
			buttonStyleType: number
			textColor: string
			backgroundColor: string
			bodyBackgroundColor:string
			paddingTop: number
			paddingBottom: number
			paddingX: number
			radiusTop: number
			radiusBottom: number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			list:[],
			rowNumber: 4,
			buttonType: 0,
			buttonStyleType: 0,
			textColor: 'rgba(48, 49, 51, 1)',
			backgroundColor: '',
			bodyBackgroundColor:'',
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})
	
	const ctx = useCurrentInstance()
	const { viewStyle,bodyClass:viewClass,bodyBoxStyle:boxStyle,jumpLink } = useLayoutCompoments(ctx, props.option)
	
	const itemStyle = computed(() => {
		return { flex: `0 0 ${100 / props.option.rowNumber}%` }
	})
	const imgStyle = computed(() => {
		return {
			borderRadius:props.option.buttonStyleType == 0 ? '0rpx' : props.option.buttonStyleType == 1 ? '6rpx' : '50%' 
		}
	})

</script>
<style scoped lang="scss">
	@import '@/components/list/css/layoutGoods.scss';
	@import '@/components/list/css/layoutCommon.scss';
</style>
